<template>
  <div class="node-panel">
    <div class="panel-title">流程节点</div>
    <div class="node-list">
      <div
        v-for="(item, index) in nodeList"
        :key="index"
        class="node-item"
        :data-type="item.type"
        :data-shape="item.shape"
        :data-name="item.name"
        @mousedown="onDragStart($event, item)"
      >
        <div class="node-item-label">{{ item.name }}</div>
      </div>
    </div>
  </div>
</template>

<script setup>
import { ref } from "vue";

// 定义节点列表
const nodeList = ref([
  { name: "开始工序", type: "start", shape: "circle", iconClass: "start-node" },
  { name: "结束工序", type: "end", shape: "circle", iconClass: "end-node" },
  {
    name: "加工工序",
    type: "processing",
    shape: "rect",
    iconClass: "processing-node",
  },
  {
    name: "检验工序",
    type: "inspection",
    shape: "diamond",
    iconClass: "inspection-node",
  },
  { name: "返工工序", type: "rework", shape: "rect", iconClass: "rework-node" },
  {
    name: "运输工序",
    type: "transport",
    shape: "rect",
    iconClass: "transport-node",
  },
  {
    name: "组装工序",
    type: "assembly",
    shape: "rect",
    iconClass: "assembly-node",
  },
  {
    name: "包装工序",
    type: "packaging",
    shape: "rect",
    iconClass: "packaging-node",
  },
]);
const emit = defineEmits(["nodeSelected"]);
// 拖拽开始事件
const onDragStart = (e, nodeConfig) => {
  emit("nodeSelected", { event: e, nodeConfig });
};

defineExpose({
  nodeList,
});
</script>

<style lang="scss" scoped>
.node-panel {
  height: 100%;
  border-right: 1px solid #dcdfe6;

  .panel-title {
    padding: 10px;
    font-size: 16px;
    font-weight: bold;
    border-bottom: 1px solid #ebeef5;
  }

  .node-list {
    padding: 10px;

    .node-item {
      display: flex;
      align-items: center;
      padding: 8px 12px;
      margin-bottom: 10px;
      border: 1px solid #dcdfe6;
      border-radius: 4px;
      cursor: move;
      transition: all 0.3s;

      &:hover {
        background-color: #f5f7fa;
        border-color: #c6e2ff;
      }

      .node-item-icon {
        width: 24px;
        height: 24px;
        display: flex;
        align-items: center;
        justify-content: center;
        margin-right: 8px;

        &.start-node {
          color: #67c23a;
        }

        &.end-node {
          color: #f56c6c;
        }

        &.approval-node {
          color: #409eff;
        }

        &.condition-node {
          color: #e6a23c;
        }

        &.process-node {
          color: #909399;
        }

        &.user-node {
          color: #9254de;
        }
      }

      .node-item-label {
        font-size: 14px;
      }
    }
  }
}
</style>
